import React, { PureComponent, Fragment, useState, useContext, useEffect, useRef } from 'react';
import { Popconfirm, Icon, Form, Radio, Select, Row, Col, Input, Tabs, Button, Upload, message, Descriptions, Card, Table, Checkbox, Tooltip } from 'antd';
import CityRelation from './city/CityRelation';
import CityOfficial from './city/CityOfficial';
import CitySalary from './city/CitySalary';
import Purpose from './city/Purpose';
import LogSwitch from './city/LogSwitch';
import Customer from './city/Customer';
import {
    getCityBuzzConfigList, getCityOfficialConfigList,
    getSecurityIaByCityCode, getAvgWage,
    getCityConfigByCityCode
} from '@/services/city';

const { TabPane } = Tabs;
function callback(key) {
    console.log(key);
}
@Form.create({})
class City extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            businessData: [],
            officialData: [],
            salaryData: [],
            purposeData: [],
            logSwitchData: [],
            customerData: []
        }
        this.handlerRequest('1', { cityCode: props.record.cityCode })
    }
    /**
     * @description 获取城市参数配置列表
     * @author zlh
     * @date 2021-10-25
     * @memberof
     */
    getCityBuzzConfigList = async (params) => {
        const dataObj = await getCityBuzzConfigList(params);
        if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
            const tempData = dataObj.data.map((item, i) => {
                item.id = i;
                return item;
            })
            this.setState(oldState => ({
                ...oldState,
                businessData: tempData || []
            }));
        }
    };
    /**
     * @description 获取城市参数配置列表
     * @author zlh
     * @date 2021-10-25
     * @memberof
     */
    getCityOfficialConfigList = async (params) => {
        const dataObj = await getCityOfficialConfigList(params);
        if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
            const tempData = dataObj.data.map((item, i) => {
                item.id = i;
                return item;
            })
            this.setState(oldState => ({
                ...oldState,
                officialData: tempData || []
            }));
        }
    };
    /**
     * @description 获取城市平均工资
     * @author zlh
     * @date 2021-10-25
     * @memberof
     */
    getAvgWage = async (params) => {
        const dataObj = await getAvgWage(params);
        if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
            const tempData = dataObj.data.map((item, i) => {
                item.id = i;
                return item;
            })
            this.setState(oldState => ({
                ...oldState,
                salaryData: tempData || []
            }));
        }
    };
    /**
     * @description 获取城市平均工资
     * @author zlh
     * @date 2021-10-25
     * @memberof
     */
    getSecurityIaByCityCode = async (params) => {
        const dataObj = await getSecurityIaByCityCode(params);
        if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
            this.setState(oldState => ({
                ...oldState,
                purposeData: dataObj.data || []
            }));
        }
    };
    /**
     * @description 获取城市日志开关配置
     * @author zlh
     * @date 2021-10-27
     * @memberof
     */
    getCityConfigByCityCode = (handle) => {
        return async function (params) {
            const dataObj = await getCityConfigByCityCode(params);
            if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
                handle.call(this, dataObj.data);
            }
        }
    };
    setLogSwitchData(data) {
        this.setState(oldState => ({
            ...oldState,
            logSwitchData: data
        }));
    }
    setCustomerSwitchData = (data) => {
        this.setState(oldState => ({
            ...oldState,
            customerData: data
        }));
    };
    handlerRequest(key, data) {
        const config = {
            '1': this.getCityBuzzConfigList,
            '2': this.getCityOfficialConfigList,
            '3': this.getAvgWage,
            '4': this.getSecurityIaByCityCode,
            '5': this.getCityConfigByCityCode(this.setLogSwitchData),
            '6': this.getCityConfigByCityCode(this.setCustomerSwitchData)
        }
        config[key].call(this, data)
    }
    handleChangeTab(key) {
        console.log(key)
        this.handlerRequest(key, { cityCode: this.props.record.cityCode });
    }
    render() {
        const { businessData, officialData, salaryData, purposeData, logSwitchData, customerData } = this.state;
        const { record } = this.props;
        return <div>
            <Tooltip title="城市" style={{ margingBotto: '10px' }}>
                <span>城市名称：{record.cityName}，城市代码: {record.cityCode}</span>
            </Tooltip>
            <Tabs onChange={this.handleChangeTab.bind(this)} type="card">
                <TabPane tab="城市业务关联" key="1">
                    <CityRelation sourcesdata={businessData} cityCode={record.cityCode} />
                </TabPane>
                <TabPane tab="城市官网" key="2">
                    <CityOfficial sourcesdata={officialData} cityCode={record.cityCode} />
                </TabPane>
                <TabPane tab="历史评价工资" key="3">
                    <CitySalary sourcesdata={salaryData} cityCode={record.cityCode} />
                </TabPane>
                <TabPane tab="社保用途" key="4">
                    <Purpose sourcesdata={purposeData} cityCode={record.cityCode} />
                </TabPane>
                <TabPane tab="日志开关" key="5">
                    <LogSwitch sourcesdata={logSwitchData} cityCode={record.cityCode} />
                </TabPane>
                <TabPane tab="客服开关" key="6">
                    <Customer sourcesdata={customerData} cityCode={record.cityCode} />
                </TabPane>
            </Tabs>
        </div>

    }
}

export default City;